<template>
	<view :render-whole="true" class="flex text-view nvue" style="line-height: 0">
		<!-- #ifdef APP-PLUS-NVUE -->
		<text
			:render-whole="true"
			@click="emits('click', $event)"
			:selectable="selectable"
			:user-select="selectable"
			:class="[_fontSize ? '' : 'text-size-m', customClass, `font-${weight}`]"
			:style="[
				{
					lineHeight: (_fontSize ? _fontSize * 1.3 : 42) + props.unit,
					color: textColor
				},
				_fontSize ? { fontSize: _fontSize + props.unit } : '',
				customCSSStyle
			]"
		>
			{{ _label }}
		</text>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS-NVUE -->
		<view>
			<text
				@click="emits('click', $event)"
				:selectable="selectable"
				:user-select="selectable"
				:class="[fontSize ? '' : 'text-size-m', customClass, `font-${weight}`]"
				:style="[
					{
						lineHeight: (_fontSize ? _fontSize * 1.3 : 42) + props.unit,
						color: textColor
					},
					_fontSize ? { fontSize: _fontSize + props.unit } : '',
					customCSSStyle
				]"
			>
				<slot>{{ _label }}</slot>
			</text>
		</view>
		<!-- #endif -->
	</view>
</template>
<script lang="ts" setup>
/**
 * 文本
 * @description 自带主题和常用属性，能根据全局主题和暗黑自动切换，必须放在tmSheet下，获得更好的主题适应能力。
 */
import { computed, getCurrentInstance, inject, ref, VNode } from 'vue'
import theme from '../../tool/theme/theme'
import { custom_props, computedTheme, computedClass, computedStyle, computedDark } from '../../tool/lib/minxs'
import { tmVuetify, colorThemeType } from '../../tool/lib/interface'
import { useTmpiniaStore } from '../../tool/lib/tmpinia'
const store = useTmpiniaStore()
// 混淆props共有参数
const props = defineProps({
	...custom_props,
	label: {
		type: [String, Number],
		default: ''
	},
	fontSize: {
		type: [Number],
		default: 28
	},
	color: {
		type: String,
		default: ''
	},
	selectable: {
		type: [Boolean],
		default: false
	},
	unit: {
		type: String,
		default: 'rpx'
	},
	weight: {
		type: String,
		default: 'regular'
	}
})
const emits = defineEmits(['click'])

// 设置响应式全局组件库配置表。
const tmcfg = computed<tmVuetify>(() => store.tmStore)
//自定义样式：
const customCSSStyle = computed(() => computedStyle(props))
//自定类
const customClass = computed(() => computedClass(props))
//是否暗黑模式。
const isDark = computed(() => computedDark(props, tmcfg.value))
//计算主题
// const tmcomputed = computed(() => computedTheme(props, isDark.value));
const _label = computed(() => props.label)
const _fontSize = computed(() => Number(props.fontSize))
//从父应用组件中获取自动文字色。
const appTextColor = inject(
	'appTextColor',
	computed(() => undefined)
)
const textColor = computed(() => {
	if (props.followTheme && store.tmStore.color) return store.tmStore.color
	let isColorHex = theme.isCssColor(props.color)
	//如果当前是自定义颜色值，直接返回。
	if (isColorHex) return props.color

	//如果定义了颜色，但不是值，而是主题色，则返回对应的主题文本色。
	if (props.color && !isColorHex) {
		let nowcolor: colorThemeType = theme.getColor(props.color)
		return nowcolor.csscolor
	}
	if (!appTextColor) {
		if (isDark) return 'rgba(252, 252, 252, 1.0)'
		return 'rgba(34, 34, 34, 1.0)'
	}
	if (appTextColor.value) {
		return appTextColor.value
	}
	return 'rgba(34, 34, 34, 1.0)'
})
</script>
<style lang="scss" scoped>
@import '@/static/style/font.scss';
/* #ifndef APP-NVUE */
.text-view {
	box-sizing: border-box;
}
/* #endif */
</style>
